<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
.vue-waterfall-easy-container {
  width: 100%;
  .vue-waterfall-easy-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    .vue-waterfall-easy {
      .img-box {
        .alink {
          .img-info {
            background-color: transparent;
            opacity: 1.0;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>壁纸库管理</BreadcrumbItem>
    </Breadcrumb>
    <Form inline :label-width="100" label-position="left" :model="search">
      <Button type="success" style="margin-right: 30px" @click="addModal = true">添加</Button>
      <FormItem label="壁纸库名称">
        <Input type="text" v-model="search.name" placeholder="请输入壁纸库名称检索"/>
      </FormItem>
      <Button type="primary" style="margin-left: 30px" @click="searchClick">搜索</Button>
    </Form>
    <div align="center">
      <div v-for="v in data" class="image-item" :key="v.id">
        <img
          :src="v.image.link"
          :alt="v.image.name"
          :title="v.image.name"
          @click="itemClick(v)"
          height="200px">
        <span class="name-text">{{ v.image.name }}</span>
        <div class="item-but">
          <Button type="warning" @click="editImage(v)">修改</Button>
          <Button type="error" @click="delImage(v.id)">删除</Button>
        </div>
      </div>
    </div>
    <Page :current="current" :total="total" :page-size="pageSize" show-total show-sizer show-elevator :styles="{ marginTop: '20px' }" @on-change="pageChange" @on-page-size-change="pageSizeChange" />
    <Modal
      v-model="wallpaperLibImage.show"
      title="壁纸库"
      cancel-text="取消"
      class-name="center-modal"
      width="940px"
      >
      <div align="center" style="min-height: 500px">
        <vue-waterfall-easy
          :imgsArr="wallpaperLibImage.imageArr"
          :loadingDotCount="0"
          :imgWidth='210'
          :maxCols="4"
          :gap="10"
          height="500"
        >
          <div class="img-info" slot-scope="props">
            <p class=""><Button @click="delWallpaperImage(props.value.id)">删除</Button></p>
          </div>
          <div slot="waterfall-head">
            <div style="width: 160px;height: 80px;position: relative;cursor: pointer;border: 1px solid gray;" @click="addImage()">
              <div style="position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);">
                <Icon type="md-photos" size="26" style="color: #3399ff"></Icon>
                <p style="font-size: 12px">单击添加图片</p>
              </div>
            </div>
          </div>
        </vue-waterfall-easy>
      </div>
    </Modal>
    <Modal
      v-model="modalShow"
      :title="addModal ? '添加壁纸库' : editModal ? '修改壁纸库' : '' + '灵异壁纸库'"
      cancel-text="取消"
      class-name="center-modal"
      @on-visible-change="modalChange">
      <Form :model="form" :label-width="100" ref="modalForm" :rules="rules">
        <FormItem label="壁纸库名称" prop="name">
          <Input v-model="form.name" placeholder="请输入壁纸库名称"/>
        </FormItem>
        <FormItem label="壁纸库备注">
          <Input type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" v-model="form.remarks" placeholder="请输入壁纸库备注"/>
        </FormItem>
        <FormItem label="封面" prop="imageId">
          <Input v-model="form.imageId" style="display: none;" placeholder="请选择壁纸封面"/>
          <img v-show="imageData.cover.link" :src="imageData.cover.link" :alt="imageData.cover.name" :title="imageData.cover.name" @click="imageData.show = true" style="height: 200px">
          <div v-show="!imageData.cover.link" style="padding: 20px 0;width: 100%;height: 200px;text-align: center;position: relative;cursor: pointer;" @click="imageData.show = true">
            <div style="position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);">
              <Icon type="md-photos" size="52" style="color: #3399ff"></Icon>
              <p>单击选择图片</p>
            </div>
          </div>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modalShow = false">取消</Button>
        <Button type="primary" size="large" @click="submit">{{ addModal ? '添加' : editModal ? '修改' : '' + '灵异' }}</Button>
      </div>
    </Modal>
    <Modal
      v-model="imageData.show"
      title="选择图片"
      cancel-text="取消"
      fullscreen
      class-name="center-modal"
      @on-visible-change="imageModalChange">
      <Form inline :label-width="70" label-position="left" :model="imageData.search">
        <FormItem label="图片名">
          <Input type="text" v-model="imageData.search.name" placeholder="请输入图片名检索"/>
        </FormItem>
        <FormItem label="图片类型">
          <Select v-model="imageData.search.imageType" clearable filterable placeholder="请选择图片类型检索">
            <Option v-for="v in imageData.typeData" :value="v.id" :key="v.id">{{ v.name }}</Option>
          </Select>
        </FormItem>
        <Button type="primary" style="margin-left: 30px" @click="imageSearchClick">搜索</Button>
      </Form>
      <div style="float: left" align="center">
        <div v-for="(v, i) in imageData.data" class="image-item" :class="{ 'image-item-action': i === imageData.actionIndex }" :key="v.id" @click="imageItemClick(i, v.id, v.link, v.name)">
          <img
            :src="v.link"
            :alt="v.name"
            :title="v.name"
            height="200px"
          />
          <span class="type-text">{{ v.typeName }}</span>
          <span class="name-text">{{ v.name }}</span>
        </div>
      </div>
      <Page style="clear: both;" :current="imageData.current" :total="imageData.total" :page-size="imageData.pageSize" show-total show-sizer show-elevator :styles="{ marginTop: '20px' }" @on-change="imagePageChange" @on-page-size-change="imagePageSizeChange" />
      <div slot="footer">
        <Button type="text" size="large" @click="imageData.show = false">取消</Button>
        <Button type="primary" size="large" @click="imageSelectedClick">确定</Button>
      </div>
    </Modal>
    <Modal
      v-model="wallpaperLibImage.wallpaperLibShow"
      title="选择图片"
      cancel-text="取消"
      fullscreen
      class-name="center-modal"
      @on-visible-change="addImageModalChange">
      <Form inline :label-width="70" label-position="left" :model="imageData.search">
        <FormItem label="图片名">
          <Input type="text" v-model="imageData.search.name" placeholder="请输入图片名检索"/>
        </FormItem>
        <FormItem label="图片类型">
          <Select v-model="imageData.search.imageType" clearable filterable placeholder="请选择图片类型检索">
            <Option v-for="v in imageData.typeData" :value="v.id" :key="v.id">{{ v.name }}</Option>
          </Select>
        </FormItem>
        <Button type="primary" style="margin-left: 30px" @click="imageSearchClick">搜索</Button>
      </Form>
      <div style="float: left" align="center">
        <div v-for="v in imageData.data" class="image-item" :class="{ 'image-item-action': wallpaperLibImage.addImageArr.indexOf(v.id) !== -1 }" :key="v.id" @click="addImageItemClick(v.id)">
          <img
            :src="v.link"
            :alt="v.name"
            :title="v.name"
            height="200px"
          />
          <span class="type-text">{{ v.typeName }}</span>
          <span class="name-text">{{ v.name }}</span>
        </div>
      </div>
      <Page style="clear: both;" :current="imageData.current" :total="imageData.total" :page-size="imageData.pageSize" show-total show-sizer show-elevator :styles="{ marginTop: '20px' }" @on-change="imagePageChange" @on-page-size-change="imagePageSizeChange" />
      <div slot="footer">
        <Button type="text" size="large" @click="wallpaperLibImage.wallpaperLibShow = false">取消</Button>
        <Button type="primary" size="large" @click="addImageSelectedClick">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import {
  addWallpaper,
  delWallpaper,
  updateWallpaper,
  wallpaperAddImage, wallpaperDelImage,
  wallpaperGetImage,
  wallpaperList
} from '@/api/wallpaper'
import { imageList } from '@/api/image'
import { allImageType } from '@/api/imageType'
export default {
  name: 'WallpaperLib',
  components: {
    vueWaterfallEasy
  },
  data: function () {
    return {
      data: [],
      addModal: false,
      editModal: false,
      uploadShow: true,
      imageType: [],
      form: {},
      rules: {
        name: [
          {
            required: true,
            type: 'string',
            message: '壁纸库名称不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 100,
            message: '壁纸库名称长度在1-100位之间',
            trigger: 'blur'
          }
        ],
        imageId: [
          {
            required: true,
            type: 'number',
            message: '封面不能为空',
            trigger: 'blur'
          }
        ]
      },
      total: 0,
      current: 1,
      pageSize: 10,
      search: {},
      imageData: {
        show: false,
        total: 0,
        current: 1,
        pageSize: 10,
        data: [],
        search: {},
        typeData: [],
        item: {},
        actionIndex: -1,
        cover: {}
      },
      wallpaperLibImage: {
        show: false,
        data: [],
        imageArr: [],
        wallpaperLibShow: false,
        addImageArr: [],
        current: 1,
        pageSize: 10,
        search: {},
        typeData: [],
        item: {},
        imageData: []
      }
    }
  },
  mounted () {
    allImageType().then(res => {
      this.imageType = res.data.list
      this.imageData.typeData = res.data.list
      this.wallpaperLibImage.typeData = res.data.list
    })
    this.getData()
    this.getImageData()
  },
  computed: {
    modalShow: {
      get () {
        return this.addModal || this.editModal
      },
      set (val) {
        this.addModal = this.editModal = false
      }
    }
  },
  methods: {
    getData () {
      wallpaperList(this.search, this.current, this.pageSize).then(res => {
        this.current = res.data.page.current
        this.total = res.data.page.total
        this.data = res.data.page.records
      })
    },
    getImageData () {
      imageList(this.imageData.search, this.imageData.current, this.imageData.pageSize).then(res => {
        this.imageData.total = res.data.page.total
        this.imageData.data = res.data.page.records
        this.imageData.current = res.data.page.current
      })
    },
    getAddImageData () {
      imageList(this.wallpaperLibImage.search, this.wallpaperLibImage.current, this.wallpaperLibImage.pageSize).then(res => {
        this.wallpaperLibImage.total = res.data.page.total
        this.wallpaperLibImage.imageData = res.data.page.records
        this.wallpaperLibImage.current = res.data.page.current
      })
    },
    getWallpaperImage (id) {
      wallpaperGetImage(id).then(res => {
        if (res.code === 200) {
          this.wallpaperLibImage.data = res.data.list
          this.wallpaperLibImage.imageArr = res.data.list.map(v => { return { id: v.id, src: v.image.link } })
        }
      })
    },
    modalChange (v) {
      if (!v) {
        this.$refs.modalForm.resetFields()
        this.uploadShow = true
        this.form = {}
        this.imageData.show = false
        this.imageData.cover.link = null
      }
    },
    submit () {
      this.$refs.modalForm.validate((v) => {
        if (v) {
          if (this.addModal) {
            addWallpaper(this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.addModal = false
              }
            })
          }
          if (this.editModal) {
            this.form.updateTime = null
            updateWallpaper(this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.editModal = false
              }
            })
          }
        }
      })
    },
    pageChange (index) {
      this.current = index
      this.getData()
    },
    pageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getData()
    },
    searchClick () {
      this.current = 1
      this.getData()
    },
    editImage (obj) {
      this.form = { ...obj }
      this.uploadShow = false
      this.editModal = true
      this.imageData.cover.link = obj.image.link
      this.imageData.cover.name = obj.image.name
    },
    delImage (id) {
      this.$Modal.confirm({
        title: '删除提示',
        content: '是否确认删除?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          delWallpaper(id).then(res => {
            if (res.code === 200) {
              this.getData()
              this.$Message.success(res.msg)
            }
          })
        }
      })
    },
    imageModalChange (v) {
      if (!v) {
        this.imageData.item = {}
        this.imageData.actionIndex = -1
        this.imageData.search = {}
        this.imageData.current = 1
        this.getImageData()
      }
    },
    imageSelectedClick () {
      if (this.imageData.item.link === undefined || this.imageData.item.link.trim() === '') return this.$Message.warning('请选择一张图片作为封面！')
      this.form.imageId = this.imageData.item.id
      this.imageData.cover.link = this.imageData.item.link
      this.imageData.cover.name = this.imageData.item.name
      this.imageData.show = false
    },
    imageItemClick (i, id, link, name) {
      this.imageData.actionIndex = i
      this.imageData.item.id = id
      this.imageData.item.link = link
      this.imageData.item.name = name
    },
    imagePageChange (index) {
      this.imageData.current = index
      this.getImageData()
    },
    imagePageSizeChange (size) {
      this.imageData.current = 1
      this.imageData.pageSize = size
      this.getImageData()
    },
    imageSearchClick () {
      this.imageData.current = 1
      this.getImageData()
    },
    itemClick (v) {
      this.wallpaperLibImage.show = true
      this.wallpaperLibImage.item = v
      this.getWallpaperImage(v.id)
    },
    addImage () {
      this.wallpaperLibImage.wallpaperLibShow = true
    },
    addImageItemClick (id) {
      if (this.wallpaperLibImage.addImageArr.indexOf(id) === -1) this.wallpaperLibImage.addImageArr.push(id)
      else this.wallpaperLibImage.addImageArr.splice(this.wallpaperLibImage.addImageArr.indexOf(id), 1)
    },
    addImageModalChange (v) {
      if (!v) {
        this.wallpaperLibImage.search = {}
        this.wallpaperLibImage.current = 1
        this.wallpaperLibImage.addImageArr = []
        this.getAddImageData()
      }
    },
    addImageSelectedClick () {
      if (this.wallpaperLibImage.addImageArr.length) {
        wallpaperAddImage(this.wallpaperLibImage.item.id, this.wallpaperLibImage.addImageArr).then(res => {
          if (res.code === 200) {
            this.$Message.success(res.msg)
            this.getWallpaperImage(this.wallpaperLibImage.item.id)
          }
          this.wallpaperLibImage.wallpaperLibShow = false
        })
      }
    },
    delWallpaperImage (id) {
      this.$Modal.confirm({
        title: '删除提示',
        content: '是否确认删除?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          wallpaperDelImage(id).then(res => {
            if (res.code === 200) {
              this.$Message.success(res.msg)
              this.getWallpaperImage(this.wallpaperLibImage.item.id)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
form {
  margin-top: 20px;
}
.image-item {
  display: inline-block;
  position: relative;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 50px;
  .type-text {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    color: #FFFFFF;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .name-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    color: #FFFFFF;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-but {
    text-align: right;
    button {
      margin-left: 10px;
    }
  }
}
.image-item-action {
  border: 3px solid #ff4d4d;
}
</style>
